<template>
    <view class="scan-wrapper">
        <view class="scan-box" :class="{ scanning: isScanning }">
            <view class="scan-border">
                <view class="scan-line" v-if="isScanning"></view>
            </view>
            <view class="scan-angle scan-angle-lt"></view>
            <view class="scan-angle scan-angle-rt"></view>
            <view class="scan-angle scan-angle-lb"></view>
            <view class="scan-angle scan-angle-rb"></view>
        </view>
        <view class="scan-tip">{{ tip }}</view>
    </view>
</template>

<script>
export default {
    name: 'ScanCode',
    props: {
        isScanning: {
            type: Boolean,
            default: false
        },
        tip: {
            type: String,
            default: '将二维码放入框内，即可自动扫描'
        }
    }
}
</script>

<style lang="scss" scoped>
.scan-wrapper {
    .scan-box {
        width: 500rpx;
        height: 500rpx;
        position: relative;
        margin: 0 auto;
        
        .scan-border {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            
            .scan-line {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 4rpx;
                background: #07c160;
                animation: scan 2s linear infinite;
            }
        }
        
        .scan-angle {
            position: absolute;
            width: 60rpx;
            height: 60rpx;
            border: 6rpx solid #07c160;
            
            &.scan-angle-lt {
                left: -6rpx;
                top: -6rpx;
                border-right: none;
                border-bottom: none;
            }
            
            &.scan-angle-rt {
                right: -6rpx;
                top: -6rpx;
                border-left: none;
                border-bottom: none;
            }
            
            &.scan-angle-lb {
                left: -6rpx;
                bottom: -6rpx;
                border-right: none;
                border-top: none;
            }
            
            &.scan-angle-rb {
                right: -6rpx;
                bottom: -6rpx;
                border-left: none;
                border-top: none;
            }
        }
    }
    
    .scan-tip {
        text-align: center;
        font-size: 28rpx;
        color: #fff;
        margin-top: 40rpx;
    }
}

@keyframes scan {
    0% {
        top: 0;
    }
    100% {
        top: 100%;
    }
}
</style> 